<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新建围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="router.push('/geofence')">返回</el-button>
  </div>
<!--  第6步. 创建地图容器组件-->
  <div id="mapContainer" style="width: 100%; height: 84vh;background-color: #13ce66"></div>
<!--  新增弹窗用以接受电子围栏的名称 在绘制完围栏 点击 对勾时弹出-->
  <el-dialog title="围栏信息" v-model="dialogVisible" :before-close="closeDialog">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input placeholder="请输入围栏名称" v-model="geofence.name"></el-input>

      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveGeofence">确认</el-button>
    </template>

  </el-dialog>

</template>
<script setup>

import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import { DrawScene, DrawControl , OperateEventType} from 'bmap-draw';
import {ElMessage} from "element-plus";
import  qs from "qs";
import axios from "axios";

// 定义变量 用来保存新型围栏弹窗是否出现
const dialogVisible = ref(false);

// 8. 定义电子围栏对象，用于后端新增围栏时使用
const geofence=ref({
  name:'',
  position:{} //围栏位置信息，注意： 这也是一个对象！
});
// 定义全局变量用于保存地图对象
var map;
// 一进到页面立即执行
onMounted(()=>{
  // 表示在DOM更新完毕后再执行，因为我们需要保证上方的地图容器div创建后再div中渲染地图
  nextTick(()=>{
    // 第7步：创建地图示例，注意不导入
     map=new BMapGL.Map("mapContainer");
  //   第8步，设置坐标点的经纬度,此处的经纬度是北京天安门的经纬度
    let point =new BMapGL.Point(116.4074,39.9024);
    // 第9步：给上方创建好的地图对象设置中心点与缩放级别
    map.centerAndZoom(point,15);

    // 为地图添加鼠标绘制控件
    // 1.创建绘制场景类，本来为所有鼠标绘制空间的基类，必须先创建DrawScene类实例，注意需要导入
    const scene = new DrawScene(map);
    // 2.再当前绘制场景下，创建绘制控件类，注意需要导入
    const drawContrl = new DrawControl(scene, {
      // 3.绘制控件配置项
      // 3.1,不显示对应绘制控件的文字显示
      enableTips: false,
      // 3.2 绘制控件的位置（右上角）
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      // 3.3 设置绘制控件显示哪些绘制项 ，circle:圆形 ，rectangle：矩形
      drawingItems: [
        // 'marker',
        // 'polyline',
        // 'polygon',
        'circle',
        'rectangle'
      ]
    });
    // 5 监听绘制完成事件，用户点击 √ 时触发此事件的对象
    scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
      // 一旦围栏绘制完毕，点击对勾，立即出现围栏名称的弹窗
      dialogVisible.value = true;

      console.log(event.target); //打印触发这个事件的目标(target)对象,也就是圆形或者矩形围栏对象

      // 6.获取触发事件对象中的overlay值，overlay代表的是围栏覆盖物
      let overlay=event.target.overlay;
      // 7 判断当前绘制的图形是圆形还是方形
      if (overlay instanceof BMapGL.Circle){ //是圆形围栏
        geofence.value.position.type='circle';
        geofence.value.position.radius=overlay.getRadius();

        geofence.value.position.latitude=overlay.getCenter().lat;
        geofence.value.position.longitude=overlay.getCenter().lng;
        console.log('地图值',geofence.value)

      }else{
        // 定义一个数组用来保存矩形四个顶点的位置
        let recPoint=[];
        for (let i=0;i<4;i++){
          recPoint.push(overlay.points[i].latLng.lng+'-'+overlay.points[i].latLng.lat);
        }
        geofence.value.position.type='rectangle';
        geofence.value.position.recPoints=recPoint.join(',');
        console.log(geofence.value);
      }
    })
    // 4 将会在控件加到地图上
    map.addControl(drawContrl);
  })
});


// 定义一个新增围栏的方法

const saveGeofence=()=>{
  if (!geofence.value.name || geofence.value.name.trim().length==0){
    ElMessage.error(('围栏名称不为空'));
    return;
  }
  console.log(geofence.value);
  // 因geofence中的position也是一个JSON对象，所以需要将position转为JSON字符串
  // 再将geofence对象转为JSON字符串
  geofence.value.position=JSON.stringify(geofence.value.position);
  let data=qs.stringify(geofence.value);
  console.log(data);
  // 给后端发送新增围栏的请求
  axios.post(BASE_URL+'/v1/geofence/save',data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('新增成功');
          dialogVisible.value=false;
          router.push('/geofence');
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};
// 定义一个取消方法

const closeDialog=()=>{
  if (confirm('您确认要关闭弹窗吗？')){
    dialogVisible.value=false;
    // 清空输入框中的围栏名称与数据
    geofence.value={name: '',position: {}};
// 清空地图上绘制围栏的覆盖物
    map.clearOverlays();
  }
}




</script>




<style scoped>

</style>